<script setup lang="ts">
import { useLayoutConfigStore } from '@/store/layoutConfig'

const route = useRoute()
const router = useRouter()
// console.log(1111, route.name);

onMounted(() => {
  let tag = route.matched[route.matched.length - 1]
  layoutConfig.selectMenu(tag)
})

const layoutConfig = useLayoutConfigStore()
const tags = computed(() => layoutConfig.tags)

// 点击标签页面
const handelMenu = (tag: any) => {
  router.push(tag.path)
  layoutConfig.selectMenu(tag)
}

// 关闭标签页面
const handelClose = (tag: any, index: number) => {
  // 通过pinia管理
  layoutConfig.updateTags(tag)
  //如果关闭的不是当前页面
  if (tag.name !== route.name) return
  if (index === layoutConfig.tags.length) {
    layoutConfig.selectMenu(tags.value[index - 1])
    router.push(tags.value[index - 1].path)
  } else {
    layoutConfig.selectMenu(tags.value[index])
    router.push(tags.value[index].path)
  }
}

</script>

<template>
  <div class="tabs">
    <el-tag v-for="(tag, index) in tags" :key="index" :closable="tag.name !== 'Home'" type="info"
      :effect="route.name === tag.name ? 'light' : 'plain'" @click="handelMenu(tag)" @close="handelClose(tag, index)">
      {{ tag.meta.title }}
    </el-tag>
  </div>
</template>

<style scoped lang="scss">
.tabs {
  margin: 0px 1px 0 10px;
  height: 40px;
  line-height: 40px;
  box-shadow: #dbdada62 2px 2px 10px;

  .el-tag {
    margin-right: 1px;
    border-radius: 2px;
    min-width: 60px;
    height: 30px;
    cursor: pointer;
  }
}
</style>